<template>
	<div class="header-wrap">
		<div class="header-inner">
			<div class="brand-box">
				<!-- <div class="logo-box">
          <img src="@imgs/logo.png" />
        </div> -->
				<div class="title">
					后台管理系统</div>
			</div>
			<div class="top-right">
				<!-- <div class="notice-box">
					<img src="@/assets/imgs/bell.png" alt="" />
				</div> -->

				<div class="user-info flex">
					<div class="avatar-box">
						<img src="@/assets/avatar.png" alt="" />
					</div>
					<div class="user-name">{{ vuex_user.username }}</div>
					<div class="user-role"></div>
					<div class="user-job"></div>
					<div class="user-bumen"></div>
				</div>

				<div class="logout" @click="logout">
					<!-- <button>退出登录</button> -->
					<el-button type="primary">退出登录</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";
export default {
	name: "userCenter",
	components: {
		//
	},
	data() {
		return {

		};
	},
	computed: {
		...mapState([]),
	},
	created() { },

	methods: {
		logout() {
			this.$store.commit("clearAdminInfo");
			this.$router.push("/login");
		},
	},
};
</script>

<style scoped lang="less">
@keyframes ani_rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.header-wrap {
	box-shadow: 0 2px 10px rgba(7, 0, 72, 0.1);

	.header-inner {
		.flex-between();
		width: 100%;
		height: 70px;
		background: #313133;
		color: #fff;

		.brand-box {
			width: 150px;
			width: fit-content;
			height: 70px;
			.flex-center();

			.logo-box {
				background: #fff;
				padding: 3px;

				img {
					background: #fff;
					width: 120px;
					// width: 40px;
					cursor: pointer;
				}
			}

			.title {
				padding-left: 30px;
				font-size: 20px;
				color: #fff
			}
		}

		.top-right {
			.flex();
			justify-content: flex-end;
			padding-right: 20px;



			.user-info {
				.avatar-box {
					width: 32px;
					height: 32px;
					border-radius: 50%;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.user-name {
					margin: 0 10px;
				}

				.user-role {}

				.user-job {}

				.user-bumen {}
			}

			.logout {
				cursor: pointer;
				font-size: 14px;
				font-weight: bold;

				// animation: ani_rotate 3s linear infinite;

				// button {
				//   .flex-center();
				//   width: 100%;
				//   width: 80px;
				//   height: 32px;
				//   line-height: 32px;
				//   background: #d9bf9d;
				//   opacity: 1;
				//   border-radius: 4px;
				//   font-size: 14px;
				//   color: #ffffff;
				// }
			}
		}
	}
}
</style>